import React, { useEffect } from 'react';
import { Rotation } from './RotationChart.style'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { useNavigate } from "react-router-dom"
const RotationChart = (props) => {
  const navigate = useNavigate()
  const { rotationImg } = props;
  console.log(rotationImg);
  useEffect(() => {
    setTimeout(() => {
      new Swiper('.top-swiper', {
        loop: true,
        autoplay: {
          delay: 1000
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true
        }
      })
      // swiper.
    }, 100)
  }, [])

  const goto = (prop) => {
    console.log(prop);
    navigate(`/home/${prop.id}`, { state: { datas: prop } });

  }

  return (
    <Rotation>
      <div className="rotation-box">
        <div className="swiper-container top-swiper" >
          <div className="swiper-wrapper">
            {
              rotationImg.map((item) => {
                return (
                  <div
                    key={item.id}
                    className="swiper-slide"
                  >

                    <img className="rotationChart-img"
                      src={item.picUrl} alt="" onClick={() => goto(item)} />
                    <div className="swiper-title">{item.show}</div>
                  </div>
                )
              })
            }
          </div>
          <div className="swiper-pagination"></div>
        </div>

      </div>
    </Rotation>
  );
}

export default RotationChart;